<template>
	<view class="live-player" ref="player">
	</view>
</template>

<script>
    import FlvJs from 'flv.js'

    export default {
        name: "Player",
        props: {
            isVideo: Boolean,//是否是视频
            playUrl: String
        },
        data() {
            return {
                player: null
            }
        },
        mounted() {
            const playerEl = this.$refs.player.$el
            const videoEl = document.createElement('video')
            videoEl.setAttribute('width', '100%')
            videoEl.setAttribute('height', '100%')
            videoEl.setAttribute('autoplay', false)
            videoEl.setAttribute('loop', this.isVideo)
            videoEl.setAttribute('preload', 'auto')
            videoEl.setAttribute('controls', false)
            // videoEl.setAttribute('object-fit', 'cover') 加不加都一样
            videoEl.setAttribute('x5-video-player-type', 'h5')
            videoEl.setAttribute('x5-video-orientation', 'portrait')
            videoEl.setAttribute('webkit-playsinline', true)
            videoEl.setAttribute('playsinline', true)
            videoEl.setAttribute('x5-video-player-fullscreen', true)
            playerEl.appendChild(videoEl)

            this.player = FlvJs.createPlayer({
                type: this.isVideo ? 'mp4' : 'flv',
                url: this.playUrl
            }, {
                enableWorker: false,
                lazyLoadMaxDuration: 3 * 60,
                seekType: 'range',
            });
            this.player.attachMediaElement(videoEl);
            this.player.load();
            setTimeout(() => {
                this.player.play();
            }, 1000)
        },
        destroyed() {
            if (this.player) {
                this.player.pause();
                this.player.unload();
                this.player.detachMediaElement();
                this.player.destroy();
                this.player = null
            }
        }
    }
</script>

<style scoped>
	.live-player {
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background-color: #000;
	}
</style>
